پیشرفت واکشی پس‌زمینه فرانت‌اند: ردیابی پیشرفت دانلود

در برنامه‌های وب مدرن، بازیابی داده‌ها از سرورهای راه دور یک نیاز اساسی است. چه دانلود فایل‌های بزرگ، چه واکشی پاسخ‌های API، یا به سادگی به‌روزرسانی داده‌های برنامه، کاربران انتظار تجربه‌ای یکپارچه و آموزنده را دارند. یک جنبه مهم این امر، ارائه بازخورد در طول عملیات واکشی پس‌زمینه است، به‌ویژه در مورد پیشرفت دانلود. این مقاله به بررسی تکنیک‌هایی برای ردیابی پیشرفت دانلود در فرانت‌اند می‌پردازد، که تجربه کاربری را افزایش می‌دهد و بینش‌های ارزشمندی را در مورد فرآیندهای انتقال داده ارائه می‌دهد.

چرا ردیابی پیشرفت دانلود مهم است

تصور کنید در حال دانلود یک تصویر بزرگ، یک سند یا کل یک مجموعه داده هستید. بدون هیچ گونه نشانه‌ای از پیشرفت، کاربر در تاریکی رها می‌شود، مطمئن نیست که آیا برنامه در حال کار است، فریز شده است یا با یک مشکل اتصال مواجه است. این کمبود بازخورد می‌تواند منجر به ناامیدی، دانلودهای رها شده و یک تجربه کاربری منفی شود. ردیابی پیشرفت دانلود این مسئله را با موارد زیر برطرف می‌کند:

• بهبود تجربه کاربری: ارائه نشانه‌های بصری، مانند نوارهای پیشرفت یا شاخص‌های درصدی، به کاربران اطمینان می‌دهد که اتفاقی در حال رخ دادن است و زمان باقیمانده دانلود را تخمین می‌زند.
• افزایش شفافیت: نمایش پیشرفت دانلود به کاربران کمک می‌کند تا درک کنند چه مقدار داده منتقل شده است و چه مقدار باقی مانده است.
• تسهیل مدیریت خطا: نظارت بر پیشرفت به توسعه‌دهندگان اجازه می‌دهد تا مشکلات احتمالی، مانند خطاهای شبکه یا اتصالات کند را شناسایی کرده و مکانیسم‌های مناسب مدیریت خطا را پیاده‌سازی کنند. این امر از ظاهر شدن برنامه در حالت خراب جلوگیری می‌کند و استراتژی‌های بازیابی خطای قوی‌تری را امکان‌پذیر می‌کند.
• افزایش عملکرد درک شده: حتی اگر خود دانلود زمان‌بر باشد، به‌روزرسانی‌های پیشرفت، درک پاسخگویی و کارایی را ایجاد می‌کنند و باعث می‌شوند برنامه احساس صیقلی‌تری داشته باشد.

Fetch API و رویدادهای پیشرفت

Fetch API روش مدرن و ترجیحی برای ایجاد درخواست‌های شبکه در مرورگرهای وب است. این روشی قدرتمند و انعطاف‌پذیر برای مدیریت بازیابی داده‌ها ارائه می‌دهد. متأسفانه، Fetch API استاندارد، به خودی خود، مستقیماً به رویدادهای پیشرفت دانلود دسترسی ندارد. با این حال، می‌توانیم از تکنیک‌هایی برای دستیابی به این هدف استفاده کنیم. به‌طور خاص، با استفاده از XMLHttpRequest (XHR) یا بهره‌گیری از پاسخ‌های جریانی.

استفاده از XMLHttpRequest برای ردیابی پیشرفت

در حالی که Fetch روش ترجیحی است، XMLHttpRequest (XHR) کنترل دقیق‌تری بر چرخه عمر درخواست، از جمله دسترسی به رویدادهای پیشرفت، ارائه می‌دهد. در اینجا یک مثال اساسی از نحوه ردیابی پیشرفت دانلود با استفاده از XHR آورده شده است:

            
function trackDownloadProgress(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      callback(percentComplete);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      // Success
      callback(100);
      // Process the response
    } else {
      // Error
      callback(-1, xhr.status); // Indicate an error
    }
  };

  xhr.onerror = () => {
    callback(-1, 'Network Error'); // Indicate a network error
  };

  xhr.send();
}

// Example usage:
trackDownloadProgress('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

در این کد:

• ما یک شیء XMLHttpRequest ایجاد می‌کنیم.
• ما از xhr.open() برای مشخص کردن متد، URL و اینکه آیا درخواست باید ناهمزمان باشد (true) استفاده می‌کنیم.
• xhr.onprogress یک هندلر رویداد است که به طور دوره‌ای با پیشرفت دانلود فعال می‌شود. event.loaded نشان‌دهنده مقدار داده‌ای است که تاکنون دانلود شده است و event.total نشان‌دهنده اندازه کل منبع (در صورتی که سرور هدر Content-Length را ارائه دهد) است.
• ما درصد تکمیل را با استفاده از (event.loaded / event.total) * 100 محاسبه می‌کنیم.
• xhr.onload زمانی فراخوانی می‌شود که دانلود کامل شود (یا درخواست موفقیت‌آمیز باشد). ما xhr.status را بررسی می‌کنیم تا نتیجه را تعیین کنیم (به عنوان مثال، 200 برای موفقیت).
• xhr.onerror خطاهای احتمالی شبکه یا اتصال را مدیریت می‌کند.
• ما درصد پیشرفت را به تابع callback منتقل می‌کنیم تا UI را به‌روز کنیم. یک خطا با -1 برای پیشرفت و دلیل آن نشان داده می‌شود.

توجه: event.total ممکن است 0 باشد اگر سرور هدر Content-Length را ارائه نکند. در چنین مواردی، ردیابی پیشرفت محدود است، و ممکن است فقط بتوانید یک شاخص پیشرفت نامشخص (به عنوان مثال، یک چرخ ریسندگی) را نشان دهید.

ردیابی پیشرفت با Fetch و پاسخ‌های جریانی

مرورگرهای مدرن امکان جریان پاسخ را فراهم می‌کنند، که یک راه‌حل مشابه با تکنیک XHR ارائه می‌دهد. این امر به‌ویژه هنگام برخورد با فایل‌های بزرگ مفید است. ایده اصلی خواندن پاسخ به عنوان یک جریان و استفاده از ReadableStream برای نظارت بر تکه‌های داده در هنگام رسیدن آنها است.

            
async function trackDownloadProgressFetch(url, callback) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        callback(100); // Download complete
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      callback(progress);
    }

  } catch (error) {
    console.error('Download error:', error);
    callback(-1, error.message); // Indicate an error
  }
}

// Example usage:
trackDownloadProgressFetch('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

در اینجا نحوه عملکرد این کد آمده است:

• ما از fetch() برای شروع درخواست استفاده می‌کنیم.
• ما response.ok را بررسی می‌کنیم (وضعیت در محدوده 200-299).
• ما هدر content-length را از پاسخ دریافت می‌کنیم تا اندازه فایل را تعیین کنیم.
• response.body یک ReadableStream است که بدنه پاسخ را نشان می‌دهد. ما یک reader برای این جریان دریافت می‌کنیم.
• ما به‌طور مکرر reader.read() را فراخوانی می‌کنیم تا تکه‌های داده را از جریان بخوانیم.
• done نشان می‌دهد که آیا جریان به‌طور کامل خوانده شده است یا خیر. اگر `done` درست باشد، دانلود کامل شده است.
• value یک ArrayBuffer است که شامل تکه فعلی داده‌ها است.
• ما loadedBytes را به‌روز می‌کنیم و پیشرفت را محاسبه می‌کنیم.
• ما تابع callback را فراخوانی می‌کنیم تا UI را به‌روز کنیم.

این روش یک رویکرد مدرن‌تر ارائه می‌دهد که عملکرد بهتری را هنگام برخورد با فایل‌های بزرگ ارائه می‌دهد، زیرا شما کل فایل را به‌طور همزمان در حافظه بارگذاری نمی‌کنید.

پیاده‌سازی یک UI برای پیشرفت دانلود

هنگامی که داده‌های پیشرفت را دارید، گام بعدی ایجاد یک رابط کاربری (UI) است که وضعیت دانلود را به‌طور مؤثر منتقل می‌کند. در اینجا برخی از عناصر UI و بهترین شیوه‌ها آمده است:

نوارهای پیشرفت

نوارهای پیشرفت رایج‌ترین و شهودی‌ترین راه برای نمایش پیشرفت دانلود هستند. آنها درصد داده‌های دانلود شده را به‌طور بصری نشان می‌دهند. نوار پیشرفت باید:

• به‌وضوح درصد پیشرفت را، به‌صورت عددی یا بصری، نشان دهد.
• از رنگ‌ها و استایلی استفاده کنید که با طراحی برنامه شما مطابقت داشته باشد.
• در نظر بگیرید که یک زمان تخمینی باقیمانده را بر اساس سرعت دانلود اضافه کنید، در صورت وجود.

            
<div class="progress-container">
  <div class="progress-bar" style="width: 0%;"></div>
  <span class="progress-text">0%</span>
</div>

            

              
                Copy
              
            
          

            
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  width: 0%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

            
function updateProgressBar(progress) {
  const progressBar = document.querySelector('.progress-bar');
  const progressText = document.querySelector('.progress-text');

  if (progress === -1) {
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = 'red';
    progressText.textContent = 'Error';
    return;
  }

  progressBar.style.width = progress + '%';
  progressText.textContent = progress.toFixed(0) + '%';
}

// Call updateProgressBar(progress) within your download progress callback.

            

              
                Copy
              
            
          

اسپینرها/ شاخص‌های نامشخص

هنگامی که اندازه کل فایل مشخص نیست (به عنوان مثال، سرور هدر `Content-Length` را ارائه نمی‌دهد)، می‌توانید از یک شاخص پیشرفت نامشخص، مانند یک اسپینر یا یک انیمیشن بارگیری، استفاده کنید. این نشان می‌دهد که دانلود در حال انجام است، حتی اگر نتوانید درصدی را ارائه دهید.

پیام‌های وضعیت

نمایش پیام‌های متنی که وضعیت دانلود را نشان می‌دهند، شفافیت و زمینه را فراهم می‌کند. این پیام‌ها می‌توانند شامل موارد زیر باشند:

• 'شروع دانلود...' (حالت اولیه)
• 'در حال دانلود...' (در حین دانلود)
• '50% دانلود شد...' (در حین پیشرفت)
• 'دانلود تکمیل شد!' (در تکمیل موفقیت‌آمیز)
• 'دانلود ناموفق بود. لطفاً دوباره تلاش کنید.' (در صورت بروز خطا)

مدیریت خطا

مدیریت خطای قوی حیاتی است. خطاهای احتمالی را با موارد زیر با ظرافت مدیریت کنید:

• نمایش پیام‌های خطای آموزنده به کاربر.
• اجازه دادن به کاربر برای امتحان مجدد دانلود.
• ثبت خطاها برای اشکال‌زدایی.

بهترین شیوه‌ها برای ردیابی پیشرفت دانلود فرانت‌اند

• شرایط شبکه کاربر را در نظر بگیرید: اتصالات شبکه کند یا غیرقابل اعتماد می‌تواند منجر به زمان دانلود طولانی شود. بازخوردی ارائه دهید که این شرایط را در نظر بگیرد. ممکن است زمان تخمینی باقیمانده را محاسبه کنید (اگرچه این می‌تواند با سرعت‌های مختلف شبکه نادرست باشد) و پیامی مانند 'در حال دانلود... ممکن است چند دقیقه طول بکشد' را نمایش دهید.
• به‌روزرسانی‌ها را محدود کنید: از به‌روزرسانی بیش از حد UI خودداری کنید، زیرا این امر می‌تواند بر عملکرد تأثیر بگذارد. نوار پیشرفت را در فواصل زمانی (به عنوان مثال، هر 100-200 میلی‌ثانیه) به‌روز کنید یا فقط زمانی که پیشرفت به‌طور قابل توجهی تغییر می‌کند.
• بازخورد بصری واضح ارائه دهید: از یک نوار پیشرفت یا اسپینر واضح و مختصر استفاده کنید. درک وضعیت دانلود را آسان کنید. در نظر بگیرید که از رنگ‌هایی استفاده کنید که با برند برنامه شما سازگار باشند.
• انواع فایل‌های مختلف را مدیریت کنید: اطمینان حاصل کنید که ردیابی پیشرفت شما انواع فایل‌های مختلف (تصاویر، اسناد، ویدئوها و غیره) را به درستی مدیریت می‌کند. در نظر بگیرید که یک نماد مناسب برای نوع فایل را نمایش دهید.
• بین‌المللی‌سازی (i18n): تمام عناصر UI (پیام‌های پیشرفت، پیام‌های خطا و غیره) را به چندین زبان ترجمه کنید تا از مخاطبان جهانی پشتیبانی کنید. از یک کتابخانه یا سرویس ترجمه برای مدیریت ترجمه‌های خود استفاده کنید. به عنوان مثال، ممکن است لازم باشد یک پیام پیشرفت ترجمه شود: "در حال دانلود..." به زبان‌های مختلف برای بین‌المللی‌سازی مناسب.
• دسترسی‌پذیری: اطمینان حاصل کنید که شاخص‌های پیشرفت شما برای کاربران دارای معلولیت قابل دسترسی هستند. از ویژگی‌های ARIA (به عنوان مثال، `aria-valuenow`, `aria-valuemin`, `aria-valuemax`) برای ارائه اطلاعات معنایی به صفحه‌خوان‌ها استفاده کنید.
• آزمایش: پیاده‌سازی ردیابی پیشرفت دانلود خود را به‌طور کامل تحت شرایط مختلف شبکه (کند، سریع، ناپایدار) و بر روی دستگاه‌های مختلف آزمایش کنید. با طیف وسیعی از اندازه‌های فایل آزمایش کنید تا اطمینان حاصل کنید که سیستم همان‌طور که انتظار می‌رود کار می‌کند.
• کش: استراتژی‌های کش را برای بهبود عملکرد فایل‌های پر دانلود شده پیاده‌سازی کنید. کش مرورگر و کش سمت سرور می‌تواند نیاز به دانلود مجدد فایل‌ها را کاهش دهد، و پاسخگویی درک شده برنامه شما را بهبود بخشد.
• محدودیت‌های اندازه فایل را در نظر بگیرید: به اندازه فایل‌هایی که اجازه دانلود آنها را می‌دهید توجه داشته باشید. برای فایل‌های بزرگ، در نظر بگیرید که دانلود را به بخش‌های کوچک‌تر و قابل مدیریت‌تر تقسیم کنید، به‌ویژه در دستگاه‌های تلفن همراه. اگر می‌خواهید یک فایل بسیار بزرگ را دانلود کنید که می‌تواند از برنامه داده آنها استفاده کند، به کاربر هشدار دهید.
• گزارش خطا: مکانیسم‌های گزارش خطا را برای گرفتن و ثبت خطاهای دانلود برای اشکال‌زدایی و نظارت پیاده‌سازی کنید. از ابزارهایی مانند Sentry یا Rollbar برای جمع‌آوری داده‌های خطا استفاده کنید.

تکنیک‌های پیشرفته و ملاحظات

Web Workers برای عملیات پس‌زمینه

برای جلوگیری از مسدود شدن thread اصلی و اطمینان از پاسخگویی UI، در نظر بگیرید از Web Workers برای انجام عملیات دانلود در پس‌زمینه استفاده کنید. این کار UI شما را روان نگه می‌دارد و از فریز شدن مرورگر در حین دانلود جلوگیری می‌کند. Web Worker می‌تواند به‌روزرسانی‌های پیشرفت را با استفاده از postMessage() به thread اصلی منتقل کند.

            
// In your main script (e.g., main.js)
const worker = new Worker('download-worker.js');

worker.postMessage({ url: 'https://example.com/your-large-file.zip' });

worker.onmessage = (event) => {
  if (event.data.type === 'progress') {
    updateProgressBar(event.data.progress);
  } else if (event.data.type === 'error') {
    console.error('Download Error:', event.data.error);
    // Handle error
  } else if (event.data.type === 'complete') {
    console.log('Download Complete!');
    // Handle completion
  }
};

            

              
                Copy
              
            
          

            
// In your worker script (e.g., download-worker.js)
self.onmessage = async (event) => {
  const { url } = event.data;
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        self.postMessage({ type: 'complete' });
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      self.postMessage({ type: 'progress', progress: progress });
    }

  } catch (error) {
    self.postMessage({ type: 'error', error: error.message });
  }
};

            

              
                Copy
              
            
          

دانلودهای از سرگیری شده

برای فایل‌های بزرگ، در نظر بگیرید که دانلودهای از سرگیری شده را پیاده‌سازی کنید. این به کاربر اجازه می‌دهد تا دانلود را متوقف کرده و بعداً از سر بگیرد. هدر `Range` را در درخواست HTTP خود پیاده‌سازی کنید تا محدوده بایت را برای دانلود مشخص کنید. سپس سرور با قسمت درخواست شده فایل پاسخ می‌دهد، و مرورگر می‌تواند از جایی که متوقف شده است از سر بگیرد. این مقاومت در برابر اختلالات شبکه را فراهم می‌کند.

Chunked Encoding

هنگام استفاده از chunked encoding، هدر `Content-Length` وجود نخواهد داشت. احتمالاً می‌خواهید پیشرفت نامشخصی را به کاربر نشان دهید یا از یک روش ترکیبی استفاده کنید که در آن اندازه در همان ابتدا تخمین زده می‌شود. این معمولاً زمانی است که از یک سرویس جریانی استفاده می‌کنید، جایی که اندازه بلافاصله مشخص نیست، مانند یک فید ویدیویی زنده.

Cross-Origin Resource Sharing (CORS)

هنگام دانلود منابع از یک مبدأ متفاوت (دامنه، پروتکل یا پورت)، اطمینان حاصل کنید که سرور از CORS پشتیبانی می‌کند. سرور باید هدر `Access-Control-Allow-Origin` را در پاسخ خود قرار دهد تا درخواست‌های cross-origin را مجاز کند. در غیر این صورت، درخواست‌های دانلود شما ممکن است توسط مرورگر مسدود شوند.

سازگاری با مرورگر

اطمینان حاصل کنید که پیاده‌سازی شما در مرورگرها و دستگاه‌های مختلف کار می‌کند. ردیابی پیشرفت دانلود خود را در مرورگرهای محبوب مانند Chrome، Firefox، Safari، Edge و در دستگاه‌های تلفن همراه (iOS و Android) آزمایش کنید. در نظر بگیرید از polyfills یا تشخیص ویژگی برای پشتیبانی از مرورگرهای قدیمی‌تر که ممکن است از تمام ویژگی‌ها به‌طور کامل پشتیبانی نکنند، استفاده کنید.

نمونه‌های دنیای واقعی

بیایید به برخی از نمونه‌های دنیای واقعی از نحوه استفاده مؤثر از ردیابی پیشرفت دانلود نگاهی بیندازیم:

• پلتفرم‌های اشتراک فایل: پلتفرم‌هایی مانند Google Drive، Dropbox و WeTransfer از نوارهای پیشرفت برای نشان دادن پیشرفت آپلود و دانلود فایل استفاده می‌کنند. آنها اغلب زمان تخمینی باقیمانده و مدیریت خطا را برای یک تجربه کاربری روان ارائه می‌دهند.
• وب‌سایت‌های دانلود نرم‌افزار: بسیاری از وب‌سایت‌های دانلود نرم‌افزار نوارهای پیشرفت را در طول فرآیند دانلود نمایش می‌دهند. این نوارها به کاربران کمک می‌کنند تا از پیشرفت دانلود مطلع شوند و زمان تکمیل آن را تخمین بزنند. سایت‌هایی مانند سایت رسمی دانلود Mozilla Firefox از نوارهای پیشرفت استفاده می‌کنند.
• پلتفرم‌های یادگیری آنلاین: پلتفرم‌های یادگیری آنلاین که محتوای مبتنی بر ویدئو یا سند را ارائه می‌دهند، از ردیابی پیشرفت برای نمایش وضعیت دانلود مطالب آموزشی استفاده می‌کنند.
• سرویس‌های پخش جریانی: سرویس‌های پخش جریانی گاهی اوقات پیشرفت پیش‌واکشی یا کش کردن محتوا را نشان می‌دهند. این عملکرد پخش را بهبود می‌بخشد.
• وب‌سایت‌های تجارت الکترونیک: سایت‌های تجارت الکترونیک از ردیابی پیشرفت هنگام دانلود تصاویر محصول یا دارایی‌های دیگر استفاده می‌کنند.

نتیجه‌گیری

پیاده‌سازی ردیابی پیشرفت دانلود در فرانت‌اند برای ایجاد یک تجربه کاربری مثبت و آموزنده ضروری است. با ارائه بازخورد بصری، مدیریت خطاها، و در نظر گرفتن بین‌المللی‌سازی و دسترسی‌پذیری، می‌توانید برنامه‌های وب بسازید که کاربرپسندتر و قابل اعتمادتر هستند. استفاده از Fetch API یا XMLHttpRequest، همراه با عناصر UI مناسب و بهترین شیوه‌ها، توسعه‌دهندگان را قادر می‌سازد تا در طول عملیات واکشی پس‌زمینه بازخورد مهمی ارائه دهند، و تجربه‌ای روان‌تر و جذاب‌تر را برای کاربران در سراسر جهان تضمین کنند. به یاد داشته باشید که هنگام طراحی پیاده‌سازی خود، شرایط مختلف شبکه، انواع فایل‌ها و سازگاری با مرورگر را در نظر بگیرید.